<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择属性值开头的</title>
    <style>
        /* 选择首先是div 然后 具有class属性 并且属性值 必须是 icon开头的这些元素 */
        div[class^=icon]{
            color: #f00;
        }

        /* 类选择器、属性选择器、伪类选择器权重都是10 */
        /* .icon1权重是10,div[class^=icon]权重是11无效 */
        /* .icon1{
            color: skyblue;
        } */

        /* 这里权重也为11,层叠性后面的替换前面的,所以颜色变了 */
        div.icon1{
            color: skyblue;
        }

        /* 也可以用!important提权 */
        /* .icon1{
            color: skyblue !important;
        } */

    </style>
</head>
<body>
    <!-- 3.属性选择器可以选择属性值开头的某些元素 -->
    <div class="icon1">小图标1</div>
    <div class="icon2">小图标2</div>
    <div class="icon3">小图标3</div>
    <div class="icon4">小图标4</div>
    <div>我是打酱油的</div>
</body>
</html>